<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>
    <h1>微博详情页面</h1>
    <h2>{{weibo.nickname}}说:{{weibo.content}}</h2>
    <div>发布于:{{weibo.created}}</div>
    <!--遍历图片路径, 遍历的过程中通过字符串拆分得到需要遍历的数组-->
    <img v-for="url in weibo.urls.split(',')" :src="url" width="200px">
    <hr>
    <div v-for="comment in arr">
        <h3><a href="javascript:void(0)" @click="f(comment.nickname)">{{comment.nickname}}</a>:{{comment.content}}
            <span style="font-size: 12px;float: right">{{comment.created}}</span>
        </h3>
    </div>
    <input type="text" placeholder="说点儿啥..." v-model="comment.content">
    <input type="button" value="发表评论" @click="send()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            weibo: {urls:""},
            comment: {content: "", weiboId: ""},
            arr: []
        },
        methods: {
            f(nickname) {
                v.comment.content = "@" + nickname + " ";
            },
            send() {
                //把当前页面展示微博的id添加到评论对象中  ?id=xxx
                // v.comment.weiboId = location.search.split("=")[1];
                v.comment.weiboId = v.weibo.id;
                if (v.comment.content.trim() == "") {
                    alert("请输入评论内容!");
                    return;
                }
                //发出评论请求
                axios.post("/comment/insert", v.comment).then(function (response) {
                    if (response.data == 1) {
                        alert("发布成功!");
                        location.reload();
                    } else {
                        alert("请先登录!");
                        location.href = "/login.html";
                    }
                })
            }
        },
        created: function () {
            //发出通过id获取微博详情的请求
            axios.get("/weibo/selectById" + location.search).then(function (response) {
                v.weibo = response.data;

            })

            //发请求获取评论信息
            axios.get("/comment/selectByWeiboId" + location.search).then(function (response) {
                v.arr = response.data;
            })

        }
    })
</script>
</body>
</html>